{extend name="public/menu2" /}
{block name='title'}-{$cur.name ?: ''}{/block}

{block name='content'}
<!--内容-->
<div class="teacher">
<div class="teacher_content">
    <div class="detail_container">

        <div class="detail_list">
            <!--左轮播图-->
            <div class="left_banner">

                <div class="swiper-container gallery-top">
                    <div class="swiper-wrapper">
                        {foreach $db.slider as $slider}
                        <div class="swiper-slide"><img src="{$slider ?: ''}"></div>
                        {/foreach}
                    </div>
                </div>
                <div class="small">
                    <ul class="pagination"></ul>
                    <!-- <div class="prev"></div>
                    <div class="next"></div> -->
                </div>
            </div>
            <!--右内容-->
            <div class="detail_brief">
                <h5>{$db.title ?: ''}</h5>
                <ul class="brief_list">
                    {foreach $db.desc as $vd}
                    <li>
                        <div class="icon">
                            <img src="{$vd.thumb ?: ''}" />
                            <p>{$vd.name}:</p>
                        </div>
                        <p class="list_text">{$vd.value ?: ''}</p>
                    </li>
                    {/foreach}
                </ul>
                <!--图表-->
                <div class="detail_chart">
                    <div class="chart" id="chart">
                    </div>
                    {php}$dbid = $db['id'];{/php}
                    <button><a href='{:url("/apply/$dbid")}'>报名咨询</a></button>
                </div>
            </div>
        </div>
        <!--list-->
        <div class="detail_classify">
            <!--标题-->
            <ul class="classify_list">
                {foreach $lesson_content as $k=>$v}
                <li {if $k==0} class="on" {/if}>{$v.title ?: ''}</li>
                {/foreach}
            </ul>
            <!--内容-->
            <div class="classify_content">
                {foreach $lesson_content as $key=>$val}
                {if $val.type=='kechenganpai'}
                <div class="content_list">
                    <div class="content_title">
                        <div>
                            <h5>{$val['title']}</h5>
                            <img src="__STATIC__/index/img/icon-red-dotted.png" />
                        </div>
                    </div>
                    <div class="plan">
                        <!--左边的导航-->
                        <div class="left_navigation">
                            <ul id="plan_day">
                                {notempty name="val['content']"}
                                {foreach $val['content'] as $valk=>$valv}
                                <li {if $valk==0} class="on" {/if}><a href="javascript:;">{$valv.title ?: ''}</a><i class="line"></i></li>
                                {/foreach}
                                {/notempty}
                            </ul>
                        </div>
                        <!--右边计划内容-->
                        <div class="plan_right">
                            {notempty name="val['content']"}
                            {foreach $val['content'] as $vck=>$vcv}
                            <div class="plan_content">
                            <h5>{$vcv.title ?: ''}</h5>
                            {notempty name="vcv['content']"}
                            {foreach $vcv['content'] as $kk=>$vv}
                            <ul>
                                <li>
                                    <h6>{$vv.title ?: ''}</h6>
                                </li>
                                {foreach $vv['content'] as $kkk=>$vvv}
                                <li>
                                    <img src="{$vvv.thumb}" />
                                    <p>{$vvv.content}</p>
                                </li>
                                {/foreach}

                            </ul>
                            {/foreach}
                            {/notempty}

                        </div>
                        {/foreach}
                        {/notempty}
                    </div>
                </div>
                    </div>
                {else}
                <div class="content_list">
                    <div class="content_title">
                        <div>
                            <h5>{$val['title']}</h5>
                            <img src="__STATIC__/index/img/icon-red-dotted.png" />
                        </div>
                    </div>
                    <div class="content_textarea">
                        {notempty name="val['content']"}
                        {foreach $val['content'] as $kk=>$vv}

                        {notempty name="vv.title"}
                        <div class="textarea_title">
                            <h6>{$vv.title ?: ''}</h6>
                        </div>
                        {/notempty}

                        <div class="textares_content">
                            {$vv.content|raw|default=''}
                        </div>
                        {/foreach}
                        {/notempty}
                    </div>
                </div>
                {/if}
                {/foreach}

            </div>
        </div>
    </div>
</div>
</div>

{/block}

{block name='script'}
<script type="text/javascript" src="__STATIC__/index/js/echarts.min.js"></script>
<link rel="stylesheet" type="text/css" href="__STATIC__/index/css/teacher.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/index/css/reset.css" />
<script type="text/javascript" src="__STATIC__/index/js/swiper.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/jquery.pin.js"></script>

<script>
    $(function () {
        //left_banner
        var zongpic = $(".left_banner .swiper-slide").length;
        var dqpic = 0;
        var left_banner = new Swiper('.left_banner .swiper-container', {
            slidesPerView: 'auto',
            autoHeight: true,
            autoplay: true,
            loop: true,
            pagination: {
                el: '.pagination',
                clickable: true,
                bulletClass: 'mm',
                bulletActiveClass: 'on',
                renderBullet: function (index, className) {
                    return '<li class="' + className + '"><div class="pic"><img src="' + $(
                        ".swiper-slide")
                        .eq(index).find('img').attr("src") + '"/></div></li>';
                },
            },
            navigation: {
                nextEl: '.next',
                prevEl: '.prev',
            },
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));
        option = {
            tooltip: {},
            radar: {
                // shape: 'circle',
                name: {
                    textStyle: {
                        color: '#333',
                        backgroundColor: '#fff',
                        borderRadius: 0,
                        padding: [0, 5]
                    }
                },
                indicator: {$db['leidatu']|raw|json_encode},
                axisLine: {
                    lineStyle: {
                        color: 'rgba(222, 222, 222, 1)',
                    }
                },
            },
            series: [{
                name: '分布图',
                type: 'radar',
                data: [{
                    value: {$leidatu_value|raw|json_encode},
                    areaStyle: {
                        normal: {
                            opacity: 1,
                            color: new echarts.graphic.RadialGradient(0.5, 0, 1, [{
                                color: 'rgba(255, 203, 101,.5)',
                                offset: 1
                            }])
                        }
                    }
                }]
            }]
        };
        myChart.setOption(option);


        //切换详情
        $('.classify_list li').on('click', function () {
            var index = $(this).index()
            $(this).addClass('on').siblings().removeClass('on')
            var height = $('.classify_content .content_list').eq(index)
            height = height[0].offsetTop - 160
            $('html,body').stop(true).animate({
                'scrollTop': height + 'px'
            })
        })

        $('#plan_day li').on('click',function(){
            $(this).addClass('on').siblings().removeClass('on')
            let index = $(this).index()
            let parentHeight = $(this).parents('.plan')
            parentHeight = parentHeight[0].offsetTop - 160
            let height = $('.plan_right .plan_content').eq(index)[0].offsetTop
            $('html,body').stop(true).animate({
                'scrollTop': parentHeight + height + 'px'
            })
        })
        //置顶切换
        $(window).scroll(function(){
            let top = $('.navbar_title').height() + $('.detail_list').height() + 60
            if ($(window).scrollTop() > top) {
                $('.classify_list').css({
                    "position": "fixed",
                    "top": "90px",
                    "left": "0",
                    "right": "0",
                    "z-index": 10
                })
            } else {
                $('.classify_list').removeAttr('style')
            }
            if ($("#plan_day").attr('style')) {
                $("#plan_day").css('top', "135px")
            }
            /***滚动修改 start ***/
            //滚动到标杆位置,左侧导航加active
            $('.content_list').each(function(index) {
                var target = parseInt($(this).offset().top - 160 - $(window).scrollTop());
                if (target <= 0) {
                    $('.classify_list li').eq(index).addClass('on').siblings().removeClass('on')
                }
                //如果到达页面底部，给左侧导航最后一个加active
                else if ($(document).height() == $(window).scrollTop() + $(window).height()) {
                    $('.classify_list li:last-child').addClass('on').siblings().removeClass('on')
                }
            });
            $('.plan_content').each(function(index) {
                var _target = parseInt($(this).offset().top - 160 - $(window).scrollTop());
                if (_target <= 0) {
                    $('#plan_day li').eq(index).addClass('on').siblings().removeClass('on')
                }
                //如果到达页面底部，给左侧导航最后一个加active
                else if ($(document).height() == $(window).scrollTop() + $(window).height()) {
                    $('#plan_day li:last-child').addClass('on').siblings().removeClass('on')
                }
            });
            /**滚动修改 end**/
        });
        $("#plan_day").pin({
            containerSelector: ".plan",
        })
    })
</script>

{/block}